<template>
  <div class="view-container letter-save">
    <header class="view-header center">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>交办督办事项</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-button @click="submitForm" :loading="submitLoading" type="success">保存</el-button>
          </div>
        </div>
      </div>
    </header>
    <div class="form-container">

      <el-form :model="letter" ref="form" :rules="rules" label-width="100px">
        <div class="form-header">
          <div class="top-bar">
            <div class="top-bar-tag"></div>
            <div class="top-bar-title">交办督办事项</div>
          </div>
          <div class="section">
            <el-form-item label="标题" prop="letterTitle">
              <el-input v-model.trim="letter.letterTitle" placeholder="请输入标题"></el-input>
            </el-form-item>
            <!--两个下拉框-->
            <el-row>
              <el-col :span="12">
                <el-form-item label="督办类别" prop="letterType">
                  <el-select v-model="letter.letterType">
                    <el-option value="督办" label="督办"></el-option>
                    <el-option value="提醒" label="提醒"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="办理事项" prop="letterSource">
                  <el-select v-model="letter.letterSource">
                    <el-option value="领导交办" label="领导交办"></el-option>
                    <el-option value="上级指示" label="上级指示"></el-option>
                    <el-option value="信访办理" label="信访办理"></el-option>
                    <el-option value="材料报送" label="材料报送"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--日期-->
            <el-row>
              <el-col :span="12">
                <el-form-item label="拟交办日期" prop="fillDate">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="letter.fillDate"
                    type="date"
                    placeholder="请选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="办结期限" prop="latestDate">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="letter.latestDate"
                    type="date"
                    placeholder="请选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="拟办意见" prop="niBanYiJian">
              <el-input type="textarea" v-model.trim="letter.niBanYiJian" placeholder="请输入拟办意见" :rows="5"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="责任人" prop="zeRenRen">
                  <el-select v-model="letter.zeRenRen">
                    <el-option v-for="(item,index) in userList" :key="index" :value="item.userId" :label="item.userNickname"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="配合人" prop="peiHeRenIdList">
                  <el-select v-model="letter.peiHeRenIdList" multiple >
                    <el-option v-for="(item,index) in userList" :key="index" :value="item.userId" :label="item.userNickname"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="form-content">
          <div class="top-bar">
            <div class="top-bar-tag"></div>
            <div class="top-bar-title">内容</div>
          </div>
          <div class="section">
            <Tinymce ref="editor" v-model="letter.letterContent" :height="300" />
          </div>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
  import letterAPI from '@/api/letter/letter'
  import userAPI from '@/api/system/user'
  import Tinymce from '@/components/Tinymce'
  import {mapGetters} from 'vuex'

  export default {
    name: 'LetterSave',
    components: { Tinymce },
    data() {
      const dateValid = (rule, value, callback) => {
        if (this.letter.fillDate && this.letter.latestDate) {
          if(this.letter.latestDate < this.letter.fillDate){
            callback(new Error('办结期限不能早于拟交办日期'))
          }else{
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        letter:{
          fillDate: "",
          latestDate: "",
          letterContent: "",
          letterSource: "",
          letterTitle: "",
          letterType: "",
          niBanYiJian: "",
          peiHeRenIdList: [],
          zeRenRen:''
        },
        rules: {
          letterTitle:[
            {required:true,message:'请输入标题',trigger:'blur'}
          ],
          letterType:[
            {required:true,message:'请选择督办类型',trigger:'change'}
          ],
          letterSource:[
            {required:true,message:'请选择办理事项',trigger:'change'}
          ],
          fillDate:[
            {required:true,message:'请选择拟交办日期',trigger:'change'},
            {validator:dateValid,trigger:'change'}
          ],
          latestDate:[
            {required:true,message:'请选择办结期限',trigger:'change'},
            {validator:dateValid,trigger:'change'}
          ],
          niBanYiJian:[
            {required:true,message:'请输入拟办意见',trigger:'blur'},
          ],
          zeRenRen:[
            {required:true,message:'请选择责任人',trigger:'change'},
          ],
          peiHeRenIdList:[
            {required:true,message:'请选择配合人',trigger:'change'},
          ]
        },
        submitLoading: false,
        userList:[]
      }
    },
    created() {
      this.getUserList()
    },
    computed:{
      ...mapGetters([
        'userId'
      ])
    },
    methods: {
      getUserList(){
        userAPI.getList('','',1,100).then(res=>{
          console.log(res.records)
          this.userList = res.records
        })
      },
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (!this.submitLoading && valid) {
            if(this.letter.letterContent.trim() === ''){
              this.$message.warning('请输入内容')
            }else{
              this.saveOrUpdate()
            }
          }
        })
      },
      saveOrUpdate(){
        this.submitLoading = true
        letterAPI.save(this.letter).then(res=>{
          this.$message.success('保存成功')
          this.$router.push('/letter/letter-wait-handle')
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);

  /*global +*/
  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;

    .top-bar-tag {
      width: 5px;
      height: $height;
    }

    .top-bar-title {
      font-size: 16px;
    }
  }
  /*global -*/

  .view-container {
    font-size: 14px;
    background-color: #F4F9FD;
    .form-container {
      padding: 0 250px 15px;
    }
  }
  /*common +*/
  .form-header .section,
  .form-content .section {
    background-color: white;
    padding: 15px;
  }
  .form-header,.form-content {
    border: $borderColor;
    margin-bottom: 20px;
  }
  /*common -*/

  .form-container {
    position: relative;
  }
  .view-header {
    background-color: white;
    &.center {
      padding: 10px 250px ;
    }
    .header-title {
      font-size: 16px;
    }
  }
  .letter-save {
    padding:0;
  }

</style>
